<template>
  <el-container class="layout-container">
    <!-- 顶部导航栏 -->
    <el-header height="60px" class="header">
      <div class="logo-container">
        <img src="@/assets/logo.png"  alt="Logo" class="logo-img">
        <span class="work-name">可多工作室</span>
        <span class="divider">|</span>
       

         <!-- 面包屑导航 - 添加在logo和时间中间 -->
         <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
        <el-breadcrumb separator="/" class="breadcrumb">
          <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index"> 
           <span v-if="index === 0">
          <i class="el-icon-s-home"></i> {{ item.meta.shortTitle  || item.meta.title  }}
        </span>
        <span v-else>
          {{ item.meta.title  }}
        </span>
          </el-breadcrumb-item>
        </el-breadcrumb>

<!-- 日期时间 ························-->
       <span class="date-time">
          <span class="date">{{ currentDate }}</span>
          <span class="time">{{ currentTime }}</span>
        </span>


      </div>
    </el-header>
 
    <el-container>
      <!-- 动态宽度侧边栏 -->
      <el-aside :width="sidebarWidth" class="sidebar">
        <!-- 折叠按钮（使用el-button确保图标显示） -->
        <el-button 
          class="collapse-btn"
          :class="{ 'collapsed': isCollapsed }"
          @click="toggleCollapse"
          :icon="isCollapsed ? 'ArrowRight' : 'ArrowLeft'"
          circle 
          size="small"
        />
         <!-- 导航------------------------------------------------------------------------------------------------------ -->
    <el-menu 
    :default-active="activeIndex"
    background-color="#f5f1f0"
    text-color="#5a4a42"
    active-text-color="#8b7355"
    :collapse="isCollapsed"
    :collapse-transition="true"
    router 
  >
    <!-- 工作台 -->
    <el-sub-menu index="1">
      <template #title>
        <el-icon><Monitor /></el-icon>
        <span>工作台</span>
      </template>
      <el-menu-item index="/main">
        <el-icon><DataLine /></el-icon>
        <span>数据看板</span>
      </el-menu-item>
      <el-menu-item index="/quickaction">
        <el-icon><Lightning /></el-icon>
        <span>快捷操作</span>
      </el-menu-item>
    </el-sub-menu>
 
    <!-- 订单管理 -->
    <el-sub-menu index="2">
      <template #title>
        <el-icon><Document /></el-icon>
        <span>订单管理</span>
      </template>
      <el-menu-item index="/main/orders/current">
        <el-icon><List /></el-icon>
        <span>当前订单</span>
      </el-menu-item>
      <el-menu-item index="/main/orders/history">
        <el-icon><Clock /></el-icon>
        <span>历史订单</span>
      </el-menu-item>
      <el-menu-item index="/main/orders/create">
        <el-icon><Plus /></el-icon>
        <span>订单创建</span>
      </el-menu-item>
    </el-sub-menu>
 
    <!-- 客户管理 -->
    <el-sub-menu index="3">
      <template #title>
        <el-icon><User /></el-icon>
        <span>客户管理</span>
      </template>
      <el-menu-item index="/main/customers/list">
        <el-icon><Avatar /></el-icon>
        <span>客户列表</span>
      </el-menu-item>
      <el-menu-item index="/main/customers/analysis">
        <el-icon><TrendCharts /></el-icon>
        <span>客户分析</span>
      </el-menu-item>
    </el-sub-menu>
 
    <!-- 产品管理 -->
    <el-sub-menu index="4">
      <template #title>
        <el-icon><Box /></el-icon>
        <span>产品管理</span>
      </template>
      <el-menu-item index="/main/products/list">
        <el-icon><Collection /></el-icon>
        <span>产品目录</span>
      </el-menu-item>
      <el-menu-item index="/main/products/analysis">
        <el-icon><PieChart /></el-icon>
        <span>产品分析</span>
      </el-menu-item>
    </el-sub-menu>
 
    <!-- 员工管理 -->
    <el-sub-menu index="5">
      <template #title>
        <el-icon><UserFilled /></el-icon>
        <span>员工管理</span>
      </template>
      <el-menu-item index="/main/employees/list">
        <el-icon><Notebook /></el-icon>
        <span>员工列表</span>
      </el-menu-item>
      <el-menu-item index="/main/employees/tasks">
        <el-icon><Calendar /></el-icon>
        <span>任务看板</span>
      </el-menu-item>
    </el-sub-menu>
 
    <!-- 财务管理 -->
    <el-sub-menu index="6">
      <template #title>
        <el-icon><Money /></el-icon>
        <span>财务管理</span>
      </template>
      <el-menu-item index="/main/finance/list">
        <el-icon><DocumentCopy /></el-icon>
        <span>收支记录</span>
      </el-menu-item>
      <el-menu-item index="/main/finance/reports">
        <el-icon><DataAnalysis /></el-icon>
        <span>财务报表</span>
      </el-menu-item>
    </el-sub-menu>
 
    <!-- 系统设置 -->
    <el-sub-menu index="7">
      <template #title>
        <el-icon><Setting /></el-icon>
        <span>设置</span>
      </template>
    <el-menu-item index="/main/setting/account">
      <el-icon><CreditCard /></el-icon>
      <span>账户设置</span>
    </el-menu-item>
    </el-sub-menu>


  </el-menu>
        <!-- ---------------------------------------------------------------------------------------------------- -->
      </el-aside>
 
      <!-- 主内容区 -->
      <el-main class="main-content">
        <div class="content-wrapper">
          <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>
 
<script>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

export default {
  name: 'MainLayout',
  data() {
    return {
       breadcrumbList: [], // 面包屑数据 
      currentDate: '',
      currentTime: '',
      activeIndex: '/home/dashboard',
      isCollapsed: false,
    }
  },
  //面包屑~~  ~~~~  ~~~~~~ ~~
    setup() {
    const route = useRoute()
    const breadcrumbList = ref([])
 
    // 生成面包屑导航 
    const getBreadcrumb = () => {
      // 过滤有效路由记录 
      let matched = route.matched.filter( 
        item => item.meta  && item.meta.title  && !item.meta.hidden  
      )
 
      // 构造面包屑数据 
      if (matched.length  > 0) {
        // 首页使用shortTitle（如"财务"）
        const home = {
          path: '/main',
          meta: {
            title: matched[0].meta.shortTitle,
            shortTitle: matched[0].meta.shortTitle
          }
        }
 
        // 其他层级保持原样 
        breadcrumbList.value  = [home, ...matched]
      } else {
        // 默认首页 
        breadcrumbList.value  = [{
          path: '/main',
          meta: { title: '首页', shortTitle: '首页' }
        }]
      }
    } 
    // 监听路由变化 
    watch(() => route.path,  getBreadcrumb, { immediate: true })
    return { breadcrumbList }
  },
  computed: {
    sidebarWidth() {
      return this.isCollapsed  ? '64px' : '220px'
    }
  },











  
  mounted() {
    this.updateDateTime() 
    this.timeInterval  = setInterval(this.updateDateTime,  1000)
    this.activeIndex  = this.$route.path  
    this.autoCollapseOnMobile() 
    
    // 从本地存储恢复状态 
    const savedState = localStorage.getItem('sidebarCollapsed') 
    if (savedState !== null) {
      this.isCollapsed  = savedState === 'true'
    }
  },
  beforeUnmount() {
    clearInterval(this.timeInterval) 
    window.removeEventListener('resize',  this.autoCollapseOnMobile) 
  },
  methods: {
    updateDateTime() {
      const now = new Date()
      this.currentDate  = `日期：${now.toLocaleDateString('zh-CN')}` 
      this.currentTime  = `时间：${now.toLocaleTimeString('zh-CN',  { hour12: false })}`
    },
    toggleCollapse() {
      this.isCollapsed  = !this.isCollapsed  
      localStorage.setItem('sidebarCollapsed',  this.isCollapsed) 
    },
    autoCollapseOnMobile() {
      if (window.innerWidth  < 800) {
        this.isCollapsed  = true 
      }
    }
  },
  watch: {
    $route(to) {
      this.activeIndex  = to.path  
    }
  }
}
</script>
 
<style scoped>
/* 整体布局 */
.layout-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f9f7f5;
}

.breadcrumb{
  position: relative;
  top: 1px;
}
 
/* 顶部导航栏 */
.header {
  position: relative;
  background-color: #e8e1d9;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #d3c8b8;
  color: #5a4a42;
}
 
.logo-container {
  display: flex;
  align-items: center;
  font-size: 14px;
  width: 100%;
}
 
.logo-img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  filter: brightness(0.8);
}
 
.work-name {
  font-weight: bold;
  margin-right: 10px;
  color: #5a4a42;
  white-space: nowrap;
}
 
.divider {
  font-size: 20px;
  opacity: 0.4;
  margin: 0 10px;
  color: #a89f94;
}
 
.date-time {
  margin-left: auto;
  font-family: 'Courier New', monospace;
  color: #7a6b5f;
  display: flex;
  gap: 15px;
}
 
/* 折叠按钮----------------------------------------------------- */
.collapse-btn {
  width: 20px;
  height: 100px;
  position: absolute;
  /* left: 200px; */
  left:91%;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(92, 39, 39, 0.3);
  border: 1px solid #d3c8b8;
  border-radius: 10px 0px 0px 10px !important;
  color: #5a4a42;
  z-index: 10;

  padding: 0 !important;
  transition: all 0.3s ease;
}
 
.collapse-btn.collapsed  {
  left: 45px;
}
 
.collapse-btn:hover {
  background-color: rgba(92, 39, 39, 0.5);
}
 
/* 侧边栏 */
.sidebar {
  background-color: #f5f1f0;
  border-right: 1px solid #e0d9d2;
  transition: width 0.3s ease;
  /* height: 100%; */
   /* height: calc(100vh - 0px); ******** */
    height: calc(100vh - 60px); 
  position: relative;
  /* position: absolute; */

  overflow-x:hidden;
}
 
/* 菜单项样式 ---一级导航*/
:deep(.el-menu) {
  border-right: none !important;
}
 
:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
  height: 50px;
  line-height: 50px;
  transition: all 0.3s;
  
}
 :deep(.el-menu-item){
 
  margin-left: 5px;
 }
 :deep(.el-menu-item) .el-icon {
  margin-left: 55px;
}

:deep(.el-menu-item:hover),
:deep(.el-sub-menu__title:hover) {
  background-color: #ebe6e1 !important;
}
 
:deep(.el-menu-item.is-active)  {
  background-color: #f0e9e0 !important;
  border-left: 3px solid #c4b6a1;
  color: #8b7355 !important;
}
 
/* 折叠状态样式 */
:deep(.el-menu--collapse) .el-sub-menu__title span,
:deep(.el-menu--collapse) .el-menu-item span {
  display: none;
}
 
:deep(.el-menu--collapse) .el-sub-menu__title .el-sub-menu__icon-arrow {
  display: none;
}
 
/* 图标样式 */
.iconfont {
  font-size: 18px;
  margin-right: 8px;
  color: #8b7d6b;
}
 
/* 主内容区 */
.main-content {
  background-color: #ffffff;
  padding: 20px;
  color: #5a4a42;
  border-left: 1px solid #eee;
  overflow-y: auto;
  height:calc(100vh - 60px);
}
 
.content-wrapper {

  margin: 0 auto;
}
 
/* 二级菜单缩进 */
:deep(.el-menu--inline) {
  background-color: #faf8f6 !important;
}
 
:deep(.el-menu--inline .el-menu-item) {
  padding-left: 0px !important;
}
 
/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
 
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
 
/* 响应式调整 */
@media (max-width: 700px) {
  .header {
    padding: 0 15px;
  }
  
  .work-name,
  .divider {
    display: none;
  }
  
  .date-time {
    font-size: 12px;
    gap: 8px;
    
  }

}



/* 在style部分添加media响应式调整22222222222222222222222222222222222222 */
@media(max-width: 700px) {

  
  .sidebar{
      overflow-y:hidden;
      height: 100vh
  }
  
  :deep(.el-aside) {
    width: 64px !important;
    transition: width 0.3s ease !important;
  }
  
  .collapse-btn {
    left: 55px !important;
    width: 10px;
    height: 30px;
    transform:all 0.3s;
    border-radius: 5px 0  0 5px !important;
  }
  
  /* 隐藏菜单文字 */
  :deep(.el-menu-item span),
  :deep(.el-sub-menu__title span) {
    display: none !important;
  }
  
  /* 隐藏子菜单箭头 */
  :deep(.el-sub-menu__title .el-sub-menu__icon-arrow) {
    display: none !important;
  }
  
  /* 调整图标间距 */
  :deep(.el-menu-item .el-icon),
  :deep(.el-sub-menu__title .el-icon) {
    margin-right: 0 !important;
  }
}

</style>